<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { dateFormat, shortcuts, yesterday } from '@/assets/const'
import { allFinished } from '@/api/api'
import moment from 'moment'

const userId = localStorage.getItem('userId')
const username = localStorage.getItem('userName')
const date = dateFormat()
let hiddenDownloaderRef = ref(null)
const value3 = ref(date)
const value1 = ref(date)
const value2 = ref('')
const value4 = ref(date)
const mpxxDate = ref(date)
const allFinished_ = ref('请点击查看是否所有成员都已填写完毕！')

const allFinished__ = async () => {
  const res = await allFinished({ params: { date: dateFormat(value3.value) } })
  allFinished_.value = res.data.length ? '还有人未完成:' + res.data.join('、') : '所有人都已完成'
}

// 多人单日日报 WORD
const downloadMultiDocx = () => {
  const date__ = moment(value3.value).format('YYYYMMDD')
  const fileName = `地市驻商日报-威海分公司-多人-${date__}.zip`
  const downloadURL = `/api/files/exportMultiDailyWork/${fileName}?date=${date__}`
  downloadFile(downloadURL, '正在生成zip文件，约5秒后会自动下载')
}

// 多人驻商工作表 EXCEL
const downloadMultiZsgzExcel = () => {
  const startDate = '2024-08-12'
  const endDate = dateFormat(value4.value)
  const date = moment().format('YYYYMMDD')
  const fileName = `驻商需求响应清单-威海分公司-多人-${date}.zip`
  const downloadURL = `/api/files/exportMultiZsgzExcel/${fileName}?startDate=${startDate}&endDate=${endDate}&date=${date}`
  downloadFile(downloadURL, '正在生成xlsx文件，约5秒后会自动下载')
}

// 单人单日日报 WORD
const downloadSingleDocx = () => {
  const date = dateFormat(value1.value)
  const date__ = moment(value1.value).format('YYYYMMDD')
  const fileName = `地市驻商日报-威海分公司-${username}-${date__}.docx`
  const downloadURL = `/api/files/exporteDailyWork/${fileName}?date=${date}&userId=${userId}`
  downloadFile(downloadURL, '正在生成docx文件，约5秒后会自动下载')
}

// 摸排消息 WORD
const downloadMpxxExcel = () => {
  const date = dateFormat(mpxxDate.value)
  const fileName = `${date}摸排消息.docx`
  const downloadURL = `/api/files/exportMpxxDocx/${fileName}?date=${date}`
  downloadFile(downloadURL, '正在生成docx文件，约5秒后会自动下载')
}

// 驻商工作表 EXCEL
const downloadZsgzExcel = () => {
  if (!value2.value)
    return ElMessageBox.alert('请先填入起始日期哦', '提示', { confirmButtonText: 'OK' })
  const startDate = dateFormat(value2.value[0])
  const endDate = dateFormat(value2.value[1])
  const date = moment().format('YYYYMMDD')
  const fileName = `驻商需求响应清单-威海市公安局-${username}-${date}.xlsx`
  const downloadURL = `/api/files/exportZsgzExcel/${fileName}?startDate=${startDate}&endDate=${endDate}&userId=${userId}`
  downloadFile(downloadURL, '正在生成xlsx文件，约5秒后会自动下载')
}

function downloadFile(url, msg) {
  hiddenDownloaderRef.value.href = url
  setTimeout(() => {
    hiddenDownloaderRef.value.click()
    ElMessageBox.alert(msg, '提示', {
      confirmButtonText: 'OK'
    })
  })
}
</script>
<template>
  <header>日报导出下载</header>
  <main>
    <a hidden download ref="hiddenDownloaderRef"></a>
    <el-card v-show="userId == 22">
      <template #header>
        <div class="card-header">
          <span style="font-size: large">生成单日日报-所有人(Word)</span>
          <el-button @click="downloadMultiDocx" type="primary">确定</el-button>
        </div>
      </template>
      <div>
        <el-date-picker v-model="value3" type="date" />
        <span @click="allFinished__">{{ allFinished_ }}</span>
      </div>
    </el-card>
    <el-card v-show="userId == 22">
      <template #header>
        <div class="card-header">
          <span style="font-size: large">生成驻商工作表-所有人(Excel)</span>
          <el-button @click="downloadMultiZsgzExcel" type="primary">确定</el-button>
        </div>
      </template>
      <div>
        <el-date-picker v-model="value4" type="date" />
      </div>
    </el-card>
    <el-card v-show="userId == 22">
      <template #header>
        <div class="card-header">
          <span style="font-size: large">生成摸排消息日报-所有人(Word)</span>
          <el-button @click="downloadMpxxExcel" type="primary">确定</el-button>
        </div>
      </template>
      <div>
        <el-date-picker v-model="mpxxDate" type="date" />
      </div>
    </el-card>
    <el-card v-show="userId != 22">
      <template #header>
        <div class="card-header">
          <span style="font-size: large">生成单人单日日报(Word)</span>
          <el-button @click="downloadSingleDocx" type="primary">确定</el-button>
        </div>
      </template>
      <div>
        <el-date-picker v-model="value1" type="date" />
      </div>
    </el-card>
    <el-card v-show="userId != 22">
      <template #header>
        <div class="card-header">
          <span style="font-size: large">生成单人驻商工作表(Excel)</span>
          <el-button @click="downloadZsgzExcel" type="primary">确定</el-button>
        </div>
      </template>
      <div>
        <el-date-picker
          v-model="value2"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          size="default"
        />
      </div>
    </el-card>
  </main>
</template>
<style scoped lang="less">
header {
  text-align: center;
  background: #f593af;
  height: 65px;
  color: white;
  position: relative;
  padding-top: 5px;
  font-size: 22px;
  line-height: 55px;
}

.el-card {
  margin-bottom: 20px;
  .el-button {
    float: right;
  }
}
</style>
